<template>
	<view class="fullPage p30">
		<view class="container pt200 border-r1 bf shadow">
			<!-- 仓门正在打开中 -->
			<view class="flex_aj column" v-if=" !isOPen && socketInfo.openResult !== 1 && socketInfo.openResult !== 0">
				<view class="jiazai mb30">
					<image src="/static/ic_jiazai.png" mode="widthFix" style="width: 160upx;height: 160upx;"></image>
				</view>

				<view style="font-size: 46upx;">仓门正在开启，请稍等</view>
			</view>


			<view class="flex_aj column" v-if="socketInfo.openResult == 1">
				<view class="flex_aj w230 h230 mb20 border-r50p b-green">
					<image src="/static/huandian.png" mode="widthFix" style="width: 134upx;height: 100upx;"></image>
				</view>
				<view class="mb30" style="font-size: 50upx;">
					<text style="font-size: 100upx;">{{ socketInfo.oldCabinetNo || socketInfo.newCabinetNo }}</text>
					号仓门
				</view>
				<view class="mb20 lh40 tac" style="font-size: 34upx;">
					<view class="">请将电池放入到指定仓门中并接入电源线</view>
					<view class="">连接电源线后再关闭仓门</view>
				</view>
				<!-- <view class="warning">电池尚未取出？点这里</view> -->
			</view>

			<!-- 电池归还成功 -->
			<view class="pw100 flex_aj column" v-if="socketInfo.state == 2">
				<view class="mb30">
					<icon type="success" size="93"></icon>
				</view>

				<view class="mb80 ft48">电池已归还</view>
				<!-- <view class="pw100 plr60 ">
						<u-button type="primary" shape="circle" @click="routerLink({ path: '/pages/user/myOrder/rentEleDetail', query: { orderNo } })">查看订单</u-button>
					</view> -->
			</view>


			<!-- 电池归还失败 -->

			<view class="pw100 flex_aj column" v-if="socketInfo.state == 3 || socketInfo.state == 4">
				<view class="flex_aj w230 h230 mb30 border-r50p b-danger">
					<u-icon name="close" color="#fff" size="100"></u-icon>
				</view>

				<view class="mb20 ft48">归还失败</view>
				<view class="mb80 lh40 tac" v-show="socketInfo.state == 3">
					<view class="">当前放入电池非原有电池</view>
					<view class="">请取出后重新放入</view>
				</view>
				<view class="mb80 lh40 tac" v-show="socketInfo.state == 4">
					<view class="">未识别到电池放入</view>
					<view class="">查看电源线是否插好</view>
				</view>
				<view class="pw100 plr60 ">
					<u-button :custom-style="customStyle" type="primary" shape="circle"
						@click="restartOpen">重新打开仓门</u-button>
				</view>
			</view>


			<!-- 更换或归还电池 end -->
		</view>
	</view>
</template>

<script>
	import rentEleProcess from './mixins/rentEleProcess.js'
	import {
		nextTake
	} from '@/api/user.js'
	export default {
		mixins: [rentEleProcess],
		data() {
			return {
				isOPen: false,
				isHandlerType: false,
				statesss: null,
				$ws: null,
				customStyle: {
					fontSize: '20px'
				},
				list: {},
				handlerType: 4, //3是寄存电池  4是押金退电
				numberDay: 0, //寄存的天数
				deviceNo: '',
			}
		},
		onLoad(e) {
			this.deviceId = e.deviceId || ''
			this.handlerType = e.handlerType || 4
			this.numberDay = e.numberDay || 0
			this.deviceNo = e.deviceNo || ''
			this.list = JSON.parse(e.list) || {}
			console.log('333', JSON.parse(e.list));
			this.socketInit(this.list)
		},
		onUnload() {
			if (this.$ws) {
				this.$ws.close()
			}
			console.log(this.$ws, 'this.$wsthis.$wsthis.$wsthis.$ws1')
		},
		beforeDestroy() {
			if (this.$ws) {
				this.$ws.close()
			}
			console.log(this.$ws, 'this.$wsthis.$wsthis.$wsthis.$ws2')
		},
		methods: {
			// 结果处理
			resultHandle(res) {
				this.statesss = res.data.state
				const state = res.data.state
				console.log('==========', res);
				if (state != 1) {
					this.isOPen = true
					// 开门失败
					if (this.socketInfo.openResult == 0) {
						this.confirm({
							content: '开门失败',
							showCancel: false
						}).then(res => {
							this.back()
						})
					} else {
						// 开门成功   openType  1租  2还  3运维 
						console.log('是这里吗', res.data.openType)
						this.$ws.close()
						setTimeout(() => {
							if (this.handlerType == 3) { //寄存电池
								uni.reLaunch({
									url: `/pages/user/rentEle/temporaryVolume?handlerType=${this.handlerType}&numberDay=${this.numberDay}&deviceNo=${this.deviceNo}`,
								});
							} else {
								uni.reLaunch({ //押金退电 
									url: `/pages/user/wallet/depositDetail?deviceId=${this.deviceId}`,
								});
							}


						}, 1500)

					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.jiazai {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		animation: rotate 2s linear infinite;
		transform: rotate(0deg);
	}
</style>